<template>
  <div>
    <div class="computer">
      <dl>
        <dt><h2>对手</h2></dt>
        <dd><img :src="computerImg" /></dd>
      </dl>
    </div>

    <div class="player">
      <dl>
        <dt><h2>玩家</h2></dt>
        <dd><img :src="playerImg" /></dd>
      </dl>
    </div>

    <div id="info" v-show="gameResult == 0">未知</div>
    <div id="info" v-show="gameResult == 1">平手</div>
    <div id="info" v-show="gameResult == 2">你输了</div>
    <div id="info" v-show="gameResult == 3">你赢了</div>

    <div class="select">
      <dl>
        <dt>点击下列图标选择要出的选项：</dt>
        <dd>
          <button value="1" @click="handlePaper">
            <img src="../assets/1.png" style="width: 80px" />
          </button>
          <button value="2" @click="handleRock">
            <img src="../assets/2.png" style="width: 80px" />
          </button>
          <button value="3" @click="handleScissors">
            <img src="../assets/3.png" style="width: 80px" />
          </button>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
//引入图片资源
import ScissorsPng from '../assets/1.png'
import RockPng from '../assets/2.png'
import PaperPng from '../assets/3.png'

export default {
  guessgameContract: undefined,
  data() {
    return {
      computerImg: undefined,
      playerImg: undefined,
      gameResult: 0
    }
  },
  methods: {
    // 获取合约对象
    getContract() {
      // 引入 web3.js 库
      const Web3 = require('web3')
      // 创建 web3.js 库实例对象
      let myweb3 = new Web3(new Web3.providers.HttpProvider('HTTP://127.0.0.1:7545'))
      // 获取合约的 ABI 文件转为 JSON 格式
      let guessgameContractABI = JSON.parse(
        '[{"constant":false,"inputs":[{"name":"_player","type":"uint256"}],"name":"playGame","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getGuessResult","outputs":[{"name":"","type":"uint256"},{"name":"","type":"uint256"},{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"getRandom","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"}]'
      )
      // 获取合约地址
      let guessgameContractAddress = '0x5c0112884f17C5f2c73142A005fC60FFDDD385E3'
      // 创建合约对象（参数1: 合约ABI文件， 参数2: 合约地址）
      this.guessgameContract = new myweb3.eth.Contract(
        guessgameContractABI,
        guessgameContractAddress
      )
    },

    //剪刀按钮事件处理
    handlePaper() {
      let self = this
      //   alert('你出的是剪刀')
      this.playerImg = ScissorsPng

      this.guessgameContract.methods
        .playGame(1)
        .send({
          from: '0xdc913Dc03d9Eb7AEc929B1389C88fa3BCd4D3CeF',
          gas: 1500000,
          gasPrice: '1000000'
        })
        .on('receipt', receipt => {
          console.log(receipt.status)
          self.guessgameContract.methods.getGuessResult().call((err, res) => {
            console.log(res)
            // 1：剪刀 2：石头 3：布
            if (res[1] == 1) {
              self.computerImg = ScissorsPng
            } else if (res[1] == 2) {
              self.computerImg = RockPng
            } else {
              self.computerImg = PaperPng
            }

            // 1: 平手 2: 输  3:赢
            if (res[2] == 1) {
              self.gameResult = 1
            } else if (res[2] == 2) {
              self.gameResult = 2
            } else {
              self.gameResult = 3
            }
          })
        })
    },

    //石头按钮事件处理
    handleRock() {
      let self = this
      //   alert('你出的是石头')
      this.playerImg = RockPng
      this.guessgameContract.methods
        .playGame(2)
        .send({
          from: '0xdc913Dc03d9Eb7AEc929B1389C88fa3BCd4D3CeF',
          gas: 1500000,
          gasPrice: '1000000'
        })
        .on('receipt', receipt => {
          console.log(receipt.status)
          self.guessgameContract.methods.getGuessResult().call((err, res) => {
            console.log(res)
            // 1：剪刀 2：石头 3：布
            if (res[1] == 1) {
              self.computerImg = ScissorsPng
            } else if (res[1] == 2) {
              self.computerImg = RockPng
            } else {
              self.computerImg = PaperPng
            }

            // 1: 平手 2: 输  3:赢
            if (res[2] == 1) {
              self.gameResult = 1
            } else if (res[2] == 2) {
              self.gameResult = 2
            } else {
              self.gameResult = 3
            }
          })
        })
    },

    //布按钮事件处理
    handleScissors() {
      let self = this
      //   alert('你出的是布')
      this.playerImg = PaperPng

      this.guessgameContract.methods
        .playGame(3)
        .send({
          from: '0xdc913Dc03d9Eb7AEc929B1389C88fa3BCd4D3CeF',
          gas: 1500000,
          gasPrice: '1000000'
        })
        .on('receipt', receipt => {
          console.log(receipt.status)
          self.guessgameContract.methods.getGuessResult().call((err, res) => {
            console.log(res)
            // 1：剪刀 2：石头 3：布
            if (res[1] == 1) {
              self.computerImg = ScissorsPng
            } else if (res[1] == 2) {
              self.computerImg = RockPng
            } else {
              self.computerImg = PaperPng
            }

            // 1: 平手 2: 输  3:赢
            if (res[2] == 1) {
              self.gameResult = 1
            } else if (res[2] == 2) {
              self.gameResult = 2
            } else {
              self.gameResult = 3
            }
          })
        })
    }
  },

  mounted() {
    this.getContract()
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-weight: 200;
}
.player,
.computer {
  width: 50%;
  float: left;
  padding-top: 30px;
  text-align: center;
}
.player,
.computer dt {
  font-size: 28px;
}
.player img,
.computer img {
  margin-top: 30px;
  width: 30%;
}
.player img {
  transform: rotateY(180deg);
}
.select {
  text-align: center;
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 2%;
}
.select dt {
  width: 100%;
  overflow: hidden;
  line-height: 50px;
}
.select button {
  width: 20%;
  border: none;
  color: #fff;
  border-radius: 8px;
  line-height: 45px;
  margin: 0 5%;
  outline: none;
  font-size: 18px;
  cursor: pointer;
}
#info {
  width: 100%;
  text-align: center;
  overflow: hidden;
  font-size: 25px;
  line-height: 50px;
  color: red;
  padding-top: 2%;
  opacity: 100;
}
</style>
